<template>
  <view class="bar">
    <image src="/static/image/图层 1.png"></image>
    <view class="title">
      <view class="back-arrow" @click="goBack"></view>
      <view>我的订单</view>
      <view></view>
    </view>
    <view class="select">
      <view class="uni-padding-wrap uni-common-mt">
        <uni-segmented-control 
          :current="current" 
          :values="items" 
          style-type="text" 
          active-color="#FFF"
          in-active-color="#fff" 
          @clickItem="onClickItem" 
        />
      </view>
      <view class="sort">
        <view class="uni-px">
          <view class="char">排序方式</view>
          <uni-data-select 
            v-model="value" 
            :localdata="range" 
            @change="change"
            :clear-icon="false"
          ></uni-data-select>
        </view>
        <view class="date">
          <image src="/static/image/日期@3x.png"></image>
          <view class="example-body">
            <uni-datetime-picker 
              v-model="dateTimeRange" 
              type="datetimerange" 
              :border="false"
              :clearIcon="false" 
              :show-icon="false" 
              rangeSeparator="至"
              @change="handleDateTimeRangeChange"
            >
              <view class="date-picker-trigger">
                <text class="trigger-text">{{ dateTimeRange.length ? '已选择' : '预约日期' }}</text>
              </view>
            </uni-datetime-picker>
          </view>
        </view>
      </view>
      <view class="content">
        <!-- 进行中订单 -->
        <view v-if="current === 0" class="order-list">
          <view class="table" v-for="(order, index) in ongoingOrders" :key="index" @click="goToDetail(order)">
            <view>维修单号：<text>{{order.id}}</text></view>
            <view>维修方式：<text>{{order.type}}</text></view>
            <view>预约日期：<text>{{order.date}}</text></view>
          </view>
        </view>
        
        <!-- 已完成订单 -->
        <view v-if="current === 1" class="order-list">
          <view class="table" v-for="(order, index) in completedOrders" :key="index" @click="goToDetail(order)">
            <view>维修单号：<text>{{order.id}}</text></view>
            <view>维修方式：<text>{{order.type}}</text></view>
            <view>预约日期：<text>{{order.date}}</text></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'

  const items = ['进行中', '已完成']
  const current = ref(0)

  const onClickItem = (e) => {
    if (current.value !== e.currentIndex) {
      current.value = e.currentIndex
    }
  }

  const value = ref(0)
  const range = ref([
    {"value": 0, "text": "全部情况"},
    {"value": 1, "text": "到店维修"},
    {"value": 2, "text": "上门取车"}
  ])

  const change = (e) => {
    console.log('单选值:', e)
  }

  const dateTimeRange = ref([])

  const handleDateTimeRangeChange = (e) => {
    console.log('选择的日期时间范围:', e)
    dateTimeRange.value = e
  }

  // 返回上一页
  const goBack = () => {
    uni.navigateBack({
      delta: 1,
      fail: (err) => {
        console.log('返回失败:', err)
        uni.switchTab({
          url: '/pages/index/index'
        })
      }
    })
  }

  // 模拟订单数据
  const ongoingOrders = ref([
    { id: '3535252', type: '到店维修', date: '2022/11/10 11:00' },
    { id: '3535253', type: '上门取车', date: '2022/11/10 11:00' },
    { id: '3535254', type: '到店维修', date: '2022/11/10 11:00' },
	{ id: '3535253', type: '上门取车', date: '2022/11/10 11:00' },
	{ id: '3535254', type: '到店维修', date: '2022/11/10 11:00' }
  ])

  const completedOrders = ref([
    { id: '3535255', type: '上门取车', date: '2022/10/15 09:30' },
    { id: '3535256', type: '到店维修', date: '2022/10/12 14:20' }
  ])

  // 跳转到订单详情
  const goToDetail = (order) => {
    console.log("跳转到订单详情:", order)
    uni.navigateTo({
      url: '/pages/my/maintenance/record/record',
      success: res => {},
      fail: () => {},
      complete: () => {}
    })
  }
</script>

<style scoped>
  .bar {
    width: 100%;
    position: relative;
  }

  .bar image {
    width: 100%;
    height: 200px;
    position: fixed;
    z-index: 0;
  }

  .back-arrow {
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .back-arrow::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg);
    top: 50%;
    left: 0;
    margin-top: -6px;
    transition: all 0.3s ease;
  }

  .back-arrow:hover::before {
    border-color: #007AFF;
    transform: rotate(-45deg) scale(1.1);
  }

  .title {
    padding: 15px;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    position: fixed;
    z-index: 1000;
    justify-content: space-between;
    align-items: center;
  }

  .title view:nth-child(2) {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
  }

  .title view:nth-child(3) {
    width: 24px;
    height: 24px;
  }

  .select {
    width: 100%;
    position: relative;
    position: fixed;
    z-index: 999;
    color: #FFF;
    padding-top: 200px;
  }

  .uni-common-mt {
    margin-top: -150px;
  }

  .uni-padding-wrap {
    padding: 0px 80px;
  }

  .sort {
    color: #000;
    background-color: #FFF;
    width: 90%;
    height: 50px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 15px auto;
    padding: 0 10px;
    border-radius: 10px;
    z-index: 9999;
  }

  .char {
    font-size: 15px;
    margin-right: 5px;
  }

  .uni-px {
    display: flex;
    align-items: center;
    margin-left: 10px;
  }

  .date {
    align-items: center;
    display: flex;
  }

  .date image {
    width: 25.5px;
    height: 20.5px;
  }

  .example-body {
    margin-left: 15px;
    background-color: #fff;
  }

  .date-picker-trigger {
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .date-picker-trigger:active {
    background-color: #e9ecef;
    transform: scale(0.98);
  }

  .trigger-text {
    color: #007aff;
    font-size: 13px;
    line-height: 20.5px;
    font-weight: 500;
  }

  ::v-deep .uni-datetime-picker {
    border: none !important;
  }

  ::v-deep .uni-datetime-picker__input {
    display: none !important;
  }

  ::v-deep .uni-datetime-picker__selector {
    width: 100% !important;
  }

  .content {
    width: 100%;
    text-align: center;
    padding-bottom: 30px;
	height: calc(110vh - 300px);
	overflow-y: auto;
  }

  .order-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
	min-height: 0;
  }

  .table {
    width: 90%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .table:active {
    transform: scale(0.98);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  }

  .table view {
    color: #000;
    text-align: left;
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
    box-sizing: border-box;
  }

  .table view:last-child {
    border-bottom: none;
  }

  .table view text {
    font-weight: 500;
    color: #333;
    margin-left: 10px;
  }
</style>